<template>
  <div>
    <page-header title='{{cname}}管理' />
    <page-main>
      <el-button type='primary' icon='el-icon-plus' @click='onCreate'>新增{{cname}}</el-button>
      <search-bar>
        <el-form :model='search' size='small' label-width='100px' label-suffix='：'>
          <el-row>
            <el-col :span='12'>
              <el-form-item label='标题'>
                <el-input
                  v-model='search.title'
                  placeholder='请输入标题，支持模糊查询'
                  clearable
                  @keydown.enter='getDataList'
                  @clear='getDataList'
                />
              </el-form-item>
            </el-col>
          </el-row>
          <el-form-item>
            <el-button type='primary' @click='getDataList'>筛 选</el-button>
          </el-form-item>
        </el-form>
      </search-bar>
      <batch-action-bar
        v-if='batch.enable'
        :data='dataList'
        :selection-data='batch.selectionDataList'
        @check-all='$refs.table.toggleAllSelection()'
        @check-null='$refs.table.clearSelection()'
      >
        <el-button size='small'>单个批量操作按钮</el-button>
        <el-button-group>
          <el-button size='small'>批量操作按钮组1</el-button>
          <el-button size='small'>批量操作按钮组2</el-button>
        </el-button-group>
      </batch-action-bar>
      <el-table
        ref='table'
        v-loading='loading'
        class='list-table'
        :data='dataList'
        border
        stripe
        highlight-current-row
        @sort-change='onSortChange'
        @selection-change='batch.selectionDataList = $event'
      >
        <el-table-column v-if='batch.enable' type='selection' align='center' fixed />
        <el-table-column prop='title' label='标题' />
        <el-table-column label='操作' width='250' align='center' fixed='right'>
          <template #default='scope'>
            <el-button type='primary' size='mini' plain @click='onEdit(scope.row)'>编辑</el-button>
            <el-button type='danger' size='mini' plain @click='onDel(scope.row)'>删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <el-pagination
        :current-page='pagination.page'
        :total='pagination.total'
        :page-size='pagination.size'
        :page-sizes='pagination.sizes'
        :layout='pagination.layout'
        :hide-on-single-page='false'
        class='pagination'
        background
        @size-change='onSizeChange'
        @current-change='onCurrentChange'
      />
    </page-main>
    <FormMode
      v-if="['dialog', 'drawer'].includes(formMode)"
      :id='formModeProps.id'
      v-model='formModeProps.visible'
      :mode='formMode'
      @success='getDataList'
    />
  </div>
</template>

<script>
  import paginationMixin from '@/mixins/pagination' import FormMode from
  './components/FormMode/index.vue' export default { name: '{{properCase componentName}}',
  components: { FormMode }, mixins: [paginationMixin], data() { return { /** * 详情展示模式 * router
  路由跳转 * dialog 对话框 * drawer 抽屉 */ formMode: 'router', // 详情 formModeProps: { visible:
  false, id: '' }, // 搜索 search: { title: '' }, // 批量操作 batch: { enable: false,
  selectionDataList: [] }, // 列表数据 dataList: [] } }, mounted() { this.getDataList() if
  (this.formMode === 'router') { this.$eventBus.on('get-data-list', () => { this.getDataList() }) }
  }, beforeUnmount() { if (this.formMode === 'router') { this.$eventBus.off('get-data-list') } },
  methods: { getDataList() { this.loading = true let params = this.getParams() this.search.title &&
  (params.title = this.search.title) this.$api.get('{{#if
    relativePath
  }}{{relativePath}}/{{/if}}{{snakeCase moduleName}}/list', { baseURL: '/mock/', params }).then(res
  => { this.loading = false this.dataList = res.data.list this.pagination.total = res.data.total })
  }, onCreate() { if (this.formMode === 'router') { this.$router.push({ name: 'routerName' }) } else
  { this.formModeProps.id = '' this.formModeProps.visible = true } }, onEdit(row) { if
  (this.formMode === 'router') { this.$router.push({ name: 'routerName', params: { id: row.id } }) }
  else { this.formModeProps.id = row.id this.formModeProps.visible = true } }, onDel(row) {
  this.$confirm(`确认删除「${row.title}」吗？`, '确认信息').then(() => { this.$api.post('{{#if
    relativePath
  }}{{relativePath}}/{{/if}}{{snakeCase moduleName}}/delete', { id: row.id }, { baseURL: '/mock/'
  }).then(() => { this.getDataList() this.$message.success({ message: '模拟删除成功', center: true
  }) }) }).catch(() => {}) } } }
</script>

<style lang='scss' scoped>
  .el-pagination { margin-top: 20px; }
</style>